<template>
	<view>
		<view class="goodsPhoto" @click="upDataFile" style="background: #ECECEC;">
			<image :src="fullurl"></image>
			<view class="addTxt">
				<u-icon name="photo" color="#666666" size="38"></u-icon>
				添加商品图片
			</view>
		</view>
		<view class="view" style="margin-top: 20rpx;">
			<view class="xing">*</view>
			<view class="txt">商品分类:</view>
			<view class="rightTxt" @click="openSelect(0)">
				<view class="rightInfo">
					<!-- <view>请选择</view> -->
					<view>{{goodsTypeInfo.defName}}</view>
					<u-icon name="arrow-right" color="#999999" size="26"></u-icon>
				</view>
			</view>
		</view>

		<view class="view" style="border-top: #f7f7f7 solid 1rpx;">
			<view class="xing">*</view>
			<view class="txt">商品名称:</view>
			<view class="rightTxt">
				<input type="text" maxlength="20" v-model="goodsName" value="" placeholder="请输入商品名称" />
			</view>
		</view>

		<!-- <view class="view" style="border-top: #f7f7f7 solid 1rpx;">
			<view class="xing">*</view>
			<view class="txt">商品单位：</view>
			<view class="rightTxt" @click="openSelect(1)">
				<view class="rightInfo">
					<view>{{goodsCZInfo.defName}}</view>
					<u-icon name="arrow-right" color="#999999" size="26"></u-icon>
				</view>
			</view>
		</view> -->



		 <view class="view" style="border-top: #f7f7f7 solid 1rpx;">
			<view class="xing">*</view>
			<view class="txt">商品单位：</view>
			<view class="rightTxt" @click="openSelect(2)">
				<view class="rightInfo">
					<view>{{goodsOnCZInfo.defName}}</view>
					<u-icon name="arrow-right" color="#999999" size="26"></u-icon>
				</view>
			</view>
		</view>

		<!-- <view class="txtInfos">
			请选择标准分类
		</view> -->

		<view class="view" style="border-top: #f7f7f7 solid 1rpx;">
			<view class="xing">*</view>
			<view class="txt">客户分组：</view>
			<view class="rightTxt" @click="openSelect(3)">
				<view class="rightInfoType" style="display: flex;">
					<view>{{bkjkh}}</view>
					<u-icon name="arrow-down-fill" color="#288EED" size="20"></u-icon>
					<!-- <u-icon name="arrow-right" color="#999999" size="26"></u-icon> -->
				</view>
			</view>
		</view>

		<!-- <view class="view" style="border-top: #f7f7f7 solid 1rpx;">
			<view class="xing">*</view>
			<view class="txt">自定义分类：</view>
			<view class="rightTxt">
				<view class="rightInfoType">
					商品分类
					<u-icon name="arrow-down-fill" color="#288EED" size="20"></u-icon> 
					
				</view>
			</view>
		</view> -->

		<view class="view" style="border-top: #f7f7f7 solid 1rpx;">
			<view class="xing">*</view>
			<view class="txt">备注：</view>
			<view class="rightTxt">
				<view class="rightInfo">
					<!-- 请选择<u-icon name="arrow-right" color="#999999" size="26"></u-icon> -->
				</view>
			</view>
		</view>
		<view class="butTxtaare">
			<view class="txtOns">
				<textarea placeholder="请输入..." v-model="txtInfo" maxlength="50">

				</textarea>
			</view>
		</view>
		<!-- 商品分类 -->
		<u-select :default-value="goodsTypeInfo.defaultValue" :mode="goodsTypeInfo.mode" v-model="goodsTypeInfo.show" :list="goodsTypeInfo.list"
			@confirm="confirm" label-name="title" value-name="id" @cancel="cancel">
		</u-select>
		<!-- 商品称重 -->
		<u-select :default-value="goodsCZInfo.defaultValue" :mode="goodsCZInfo.mode" v-model="goodsCZInfo.show" :list="goodsCZInfo.list"
			@confirm="confirmCZ" label-name="subtitle" value-name="id" @cancel="cancel">
		</u-select>
		<!-- 非称重商品 -->
		<u-select :default-value="goodsOnCZInfo.defaultValue" :mode="goodsOnCZInfo.mode" v-model="goodsOnCZInfo.show" :list="goodsOnCZInfo.list"
			@confirm="confirmCZOn" label-name="unit_name" value-name="id" @cancel="cancel">
		</u-select>
		<!-- 客户分组不可见的客户多选 -->
		<!-- <u-select :default-value="goodsOnCZInfo.defaultValue" :mode="goodsOnCZInfo.mode" v-model="goodsOnCZInfo.show" :list="goodsOnCZInfo.list"
			@confirm="confirmCZOn" label-name="unit_name" value-name="id" @cancel="cancel">
		</u-select> -->
		
		<multiple-select
		  v-model="show"
		  :data="list"
		  :default-selected="defaultSelected"
		  @confirm="confirm1"
		></multiple-select>

		<view class="buttonSub" @click="setData()">
			<view class="subInfo">
				提交
			</view>
		</view>

	</view>
</template>
<style lang="scss" scoped>
	.buttonSub {
		width: 100%;
		height: 90rpx;

		.subInfo {
			height: 80rpx;
			margin-left: 40rpx;
			margin-right: 40rpx;
			margin-top: 123rpx;
			background: #288EED;
			font-size: 32rpx;
			font-weight: 400;
			margin-bottom: 100rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
			box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(0, 122, 255, 0.2);
			border-radius: 40rpx;
		}
	}

	.txtInfos {
		background: #f7f7f7;
		font-weight: 300;
		height: 88rpx;
		font-size: 28rpx;
		color: #999999;
		line-height: 88rpx;
		padding-left: 40rpx;
	}

	.butTxtaare {
		height: 200rpx;
		background: #FFF;

		.txtOns {
			margin-left: 40rpx;
			margin-right: 40rpx;

			textarea {
				height: 200rpx;
				width: 100%;
				font-size: 26rpx;
				color: #C3C3C3;
				padding-left: 30rpx;
				padding-top: 10rpx;
			}
		}
	}

	.view {
		height: 100rpx;
		background: #FFF;
		display: flex;
		padding-left: 40rpx;
		padding-right: 40rpx;

		.xing {
			width: 10px;
			line-height: 112rpx;
			font-size: 32rpx;
			color: #E89C38;
			margin-right: 10rpx;
		}

		.txt {
			height: 100rpx;
			line-height: 100rpx;
		}

		.rightTxt {
			//background: green;
			flex: 1;
			display: flex;
			font-size: 26rpx;
			justify-content: flex-end;
			color: #999999;

			.rightInfo {
				line-height: 100rpx;
				font-weight: 300;
				display: flex;
			}

			input {
				height: 98rpx;
				width: 430rpx;
				font-size: 26rpx;
				text-align: right;
				font-weight: 300;
			}

			.rightInfoType {
				margin-top: 25rpx;
				color: #333333;
				font-size: 26rpx;
				border-radius: 2px;
				line-height: 48rpx;
				font-weight: 300;
				background: #F6F6F6;
				height: 48rpx;
				padding-left: 20rpx;
				padding-right: 20rpx;
			}
		}
	}

	.goodsPhoto {
		height: 400rpx;
		background: #E9E9E9;
		display: flex;

		image {
			width: 100%;
			height: 400rpx;
		}

		.addTxt {
			height: 400rpx;
			opacity: 0.5;
			width: 100%; //background: green;
			position: absolute;
			line-height: 400rpx;
			text-align: center;
			color: #666666;
			font-size: 24rpx;
		}
	}

	page {
		background-color: #F8f8f7
	}
</style>
<script>
import multipleSelect from "@/components/multiple-select/multiple-select";
	export default {
		components: {
		  multipleSelect
		},
		data() {
			return {
				show: false, //是否显示 - 双向绑定
				info: "",
				list: [], //数据源
				defaultSelected: ["3", "5"], //默认选中项
				
				txtInfo:"",//备注 txt
				bkjkh:"选择不可见的客户",//选择不可见的客户
				fullurl: "", //图片显示地址  www.***.png
				url: "", // ***.png
				goodsName:"",//商品名字
				goodsTypeInfo: { //商品分类定义数据
					show:false,
					defaultValue: [0], //默认选项
					mode: 'single-column', // single-column, mutil-column, mutil-column-auto
					list: [],	//value  	label
					defName:"请选择",//默认名称
					defValue:"0"//默认值
				},
				goodsCZInfo: { //称重商品
					show:false,
					defaultValue: [0], //默认选项
					mode: 'single-column', // single-column, mutil-column, mutil-column-auto
					list: [],	//value  	label
					defName:"请选择",//默认名称
					defValue:"0"//默认值
				},
				goodsOnCZInfo: { //非称重商品
					show:false,
					defaultValue: [0], //默认选项
					mode: 'single-column', // single-column, mutil-column, mutil-column-auto
					list: [],	//value  	label
					defName:"请选择",//默认名称
					defValue:"0"//默认值
				}
			}
		},
		onShow() {
		  //模拟异步数据
		  setTimeout(() => {
		    this.list = [];
			var data={
			}
			this.$u.api.kehuAndSchool(data).then(res => {
				var cons = new Array();  
				for (var i = 0; i < res.data.length; i++) {
					console.log(res.data[i].id+"--"+res.data[i].realname);
					var array={};
					array["value"]= res.data[i].id;
					array["label"]= res.data[i].realname;
					//disabled: true //禁用
					//array["disabled"]= true;
					cons[i] = array;
				}
				this.list=cons;
			});
		  }, 1000);
		},
		methods: {
			// 确定事件
			confirm1(data) {
			  this.info = data.map(el => el.value).join(",");
			  this.bkjkh="以选中"+(this.info.match(/,/g).length+1)+"个客户";
			},
			openSelect(num){
				var _this=this;
				//this.$u.toast("加载中..."+num);//return;
				//this.$u.loading("s")
				if("3"==num){
					this.show=true;
				}
				if("2"==num){//商品单位
					
					var data={
					}
					this.$u.api.unitList(data).then(res => {
						this.goodsOnCZInfo.list=res.data;
					});
					setTimeout(() =>{
						_this.goodsOnCZInfo.show=true;
					},500)
				}
				if("1"==num){//获取商品称重信息
					this.goodsCZInfo.show=true;
					var data={
					}
					this.$u.api.weightList(data).then(res => {
						this.goodsCZInfo.list=res.data;
					});
				}
				if("0"==num){//获取商品分类信息数据
					
					var data={
					}
					this.$u.api.caiCateList(data).then(res => {
						//console.log(JSON.stringify(res.data));
						this.goodsTypeInfo.list=res.data;
					});
					setTimeout(() =>{
						_this.goodsTypeInfo.show=true;
					},500)
					
				}
			},
			confirmCZOn(e){//非称重
				e.map((val, index) => {
					let result = val.label;
					let value = val.value;
					this.goodsOnCZInfo.defName=result;
					this.goodsOnCZInfo.defValue=value;
				})
			},
			confirmCZ(e){//称重
				e.map((val, index) => {
					let result = val.label;
					let value = val.value;
					this.goodsCZInfo.defName=result;
					this.goodsCZInfo.defValue=value;
				})
			},
			confirm(e) {
				e.map((val, index) => {
					let result = val.label;
					let value = val.value;
					this.goodsTypeInfo.defName=result;
					this.goodsTypeInfo.defValue=value;
				})
			},
			cancel(e) {//取消监听--不处理
				console.log(e);
			},
			setData(){
				var url=this.url;//商品照片地址
				var goodsType=this.goodsTypeInfo.defValue;//商品分类id
				var goodsName=this.goodsName;//商品名字
				var goodsChengZhong=this.goodsCZInfo.defValue;//称重商品id
				var goodsOnCZInfo=this.goodsOnCZInfo.defValue;//非称重商品id
				var infoList=this.info;
				var txtInfo=this.txtInfo;//备注信息
			
				if(""==url){
					this.$u.toast("请添加商品照片后继续尝试...");return;
				}
				if("0"==goodsType){
					this.$u.toast("请选择商品分类后继续尝试...");return;
				}
				if(""==goodsName){
					this.$u.toast("请输入商品名称后继续尝试...");return;
				}
				if("0"==goodsOnCZInfo){
					this.$u.toast("请选择商品单位...");return;
				}
				// if("0"==goodsOnCZInfo){
				// 	this.$u.toast("请选择非称重商品...");return;
				// }
				if(""==this.info){
					this.$u.toast("请选择客户分组...");return;
				}
				var data={
					"image":url,
					"caicate_id":goodsType+"",//商品分类id
					"cai_name":goodsName,// 商品名字
					"unit_id":goodsOnCZInfo,
					//"goodsOnCZInfo":goodsOnCZInfo,
					"no_user_ids":infoList,// 不可见的id，id，id
					"remark":txtInfo//备注
				}
				console.log("==="+JSON.stringify(data))
				//alert("data=="+JSON.stringify(data));
				var _this=this;
				this.$u.api.addCai({"insert":data}).then(res => {
					//console.log(JSON.stringify(res.data));
					_this.$u.toast("提交成功...");
				});
			},
			upDataFile() {
				var _this = this;
				uni.chooseImage({
					count: 1, //上传图片的数量，默认是9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths; //拿到选择的图片，是一个数组
						//上传
						uni.uploadFile({
							url: _this.serviceUrl + '/api/farm/userupload', //post请求的地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'imageType': "/api/farm/userupload" //
							},
							header: {
								'Token': "userupload" //formData是指除了图片以外，额外加的字段
							},
							success: (uploadFileRes) => {
								//这里要注意，uploadFileRes.data是个String类型，要转对象的话需要JSON.parse一下
								_this.url = JSON.parse(uploadFileRes.data).data.url;
								_this.fullurl = JSON.parse(uploadFileRes.data).data.fullurl;
							}
						})
					}
				});
			}
		}
	}
</script>
